<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            user-select: none;
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            --pink: #ecb2ba;
            --pink-dark: #c6939a;
            --blue: #d5e0f9;
            --blue-dack: #b5c3d9;
            --paper-color: var(--blue);
            --paper-dark: var(--blue-dark);
            --paper-color: var(--pink);
            --paper-dark: var(--pink-dark)
        }

        .love-bd {
            position: fixed;
            width: 100%;
            height: 100%;
        }

        .love-bd>div {
            float: left;
            width: 50%;
            height: 50%;
            border: solid 1px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .love-bd>div:nth-child(1) {
            background: #dbedf3;
        }

        .love-bd>div:nth-child(2) {
            background: #f73859;
        }

        .love-bd>div:nth-child(3) {
            background: #404b69;
        }

        .love-bd>div:nth-child(4) {
            background: #283149;
        }


        .love-tips {
            width: 90%;
            height: 80%;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 60px;
            letter-spacing: 3px;
            position: relative;
        }

        .love-tips .paper-wall {
            overflow: auto;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .paper-wall::-webkit-scrollbar {
            width: 0 !important;
        }

        .love-button {
            width: 90%;
            padding: 10px 0;
            display: flex;
            justify-content: center;
        }

        .love-button button {
            width: 140px;
            height: 40px;
            border: 3px solid;
            border-radius: 8px;
            background: inherit;
            cursor: pointer;
            font-size: 30px;
            overflow: hidden;
            position: relative;
        }


        .get::after {
            border: 0;
            content: '';
            text-align: center;
            position: absolute;
            top: 0;
            height: 0;
            width: 100%;
            left: 0;
            background: #fcefee;
            z-index: -99;
            border-bottom-left-radius: 50%;
            border-bottom-right-radius: 50%;
            transition: all .5s;
            opacity: .8;
            font-size: 20px;
        }

        .get:hover::after {
            z-index: -99;
            height: 200%;
        }

        .love-button button::after {
            border: 0;
            content: '+';
            position: absolute;
            top: 0;
            height: 0;
            width: 100%;
            left: 0;
            background: #fcefee;
            /* z-index: -1; */
            border-bottom-left-radius: 50%;
            border-bottom-right-radius: 50%;
            transition: all .5s;
            opacity: .8;
        }

        .love-button button:hover::after {
            z-index: 0;
            height: 200%;
        }

        /* 清除浮动 */
        .clearfix::after {
            content: "";
            display: block;
            height: 0;
            visibility: hidden;
            clearfix: both;
        }

        /* IE6/7 清除浮动 */
        .clearfix {
            *zoom: 1;
        }

        .love-inputbox {
            visibility: hidden;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 500px;
            height: 0;
            border: 4px solid #000;
            background: inherit;
            backdrop-filter: blur(4px);
            box-shadow: 1px 1px 0 0;
            border-radius: 8px;
            transition: all .3s linear;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .love-inputbox::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: #d6e4f0;
            z-index: -1;
            opacity: .4;
            border-radius: 8px;
        }

        .close {
            display: none;
            width: 30px;
            height: 30px;
            border: 3px solid;
            border-radius: 50%;
            text-align: center;
            position: absolute;
            right: 10px;
            top: 10px;
            cursor: pointer;
        }

        .write-box {
            width: 400px;
            height: 0;
            transition: all .3s linear;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
        }

        .write-box .write-title {
            visibility: hidden;
            height: 0;
            font-size: 30px;
            transition: all .3s linear;
            margin-bottom: 10px;
        }

        .write-box .content {
            visibility: hidden;
            width: 100%;
            /* height: 80%; */
            height: 0;
            transition: all .3s linear;
        }

        .write-box .content textarea {
            width: 100%;
            height: 100%;
            outline: none;
            resize: none;
            font-size: 30px;
            padding: 10px;
            border-radius: 10px;
            opacity: .7;
        }

        .write-box .get {
            overflow: hidden;
            position: relative;
            cursor: pointer;
            visibility: hidden;
            margin-top: 10px;
            cursor: pointer;
            transition: all .3s linear;
            padding: 10px;
            height: 0;
            /* height: 40px; */
            width: 100%;
            border: 2px solid;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 4px;
            font-size: 20px;
        }

        .wrap {
            width: 100%;
            height: 100%;
            position: fixed;
            left: 0;
            top: 0;
            background: transparent;
            backdrop-filter: blur(1000px);
            opacity: 0;
            display: none;
            z-index: 0;
            transition: all .2s;
        }

        .look-paper {
            width: 400px;
            height: 400px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 500;
            display: none;
            padding: 20px 0;
            opacity: 0;
            transition: all .2s;
        }

        .look-paper>.big-paper {
            background: linear-gradient(to bottom right, var(--paper-dark), 20%, transparent), var(--paper-color);
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
            box-sizing: border-box;
            position: absolute;
            left: 50%;
            top: 50%;
            width: 100%;
            height: 100%;
            transform: translate(-50%, -50%);
            margin: 0 !important;
            opacity: 1 !important;
        }

        .big-paper-btn {
            position: absolute;
            left: 50%;
            bottom: 20px;
            transform: translateX(-50%);
            padding: 5px;
            /* border: 3px solid #f1f1f1; */
            color: #f1f1f1;
            /* border-radius: 8px; */
            z-index: 1000;
            cursor: pointer;
            text-decoration: underline;
        }

        .big-paper-content {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            padding: 10px;
        }

        .back {
            position: absolute;
            top: 20px;
            left: 0;
            width: 60px;
            height: 30px;
            text-align: center;
            border: 3px solid;
            border-left: 0;
            display: flex;
            background: #f1f1f1;
            justify-content: center;
            align-items: center;
            z-index: 100000;
            opacity: .9;
        }
        .back a{
            text-decoration: none;
            color: #333;
        }
    </style>
    <link rel="stylesheet" href="./paper.css">
</head>

<body>
    <div class="back"><a href="./love.html">返回</a></div>

    <div>

        <div class="love-bd clearfix">
            <div class="wish">
                <div class="love-tips ">
                    <div class="title">心愿便利贴</div>
                    <div class="paper-wall clearfix wall-0">

                    </div>
                </div>
                <div class="love-button">
                    <button class="wish-btn">+</button>
                </div>
            </div>
            <div class="share">
                <div class="love-tips">
                    <div class="title">快乐充电栈</div>
                    <div class="paper-wall clearfix wall-1">

                    </div>
                </div>
                <div class="love-button">
                    <button class="wish-btn">+</button>
                </div>
            </div>
            <div class="vent">
                <div class="love-tips">
                    <div class="title">宣泄小空间</div>
                    <div class="paper-wall clearfix wall-2">

                    </div>
                </div>
                <div class="love-button">
                    <button class="wish-btn">+</button>
                </div>
            </div>
            <div class="emo">
                <div class="love-tips">
                    <div class="title">烦恼回收站</div>
                    <div class="paper-wall clearfix wall-3">

                    </div>
                </div>
                <div class="love-button">
                    <button class="wish-btn">+</button>
                </div>
            </div>
        </div>
        <div class="love-inputbox">
            <div class="close">x</div>
            <div class="write-box">
                <div class="write-title">小心愿</div>
                <div class="content"><textarea class="textarea"></textarea></div>
                <div class="get">记下来</div>
            </div>
        </div>
        <div class="love-inputbox">
            <div class="close">x</div>
            <div class="write-box">
                <div class="write-title">分享欲</div>
                <div class="content"><textarea class="textarea"></textarea></div>
                <div class="get">记下来</div>
            </div>
        </div>
        <div class="love-inputbox">
            <div class="close">x</div>
            <div class="write-box">
                <div class="write-title">发泄</div>
                <div class="content"><textarea class="textarea"></textarea></div>
                <div class="get">记下来</div>
            </div>
        </div>
        <div class="love-inputbox">
            <div class="close">x</div>
            <div class="write-box">
                <div class="write-title">emo</div>
                <div class="content"><textarea class="textarea"></textarea></div>
                <div class="get">记下来</div>
            </div>
        </div>
        <div class="look-paper">
            <div class="big-paper" style="width:80%">
                <div class="big-paper-content"></div>
                <div class="big-paper-btn">
                    不要啦!扔掉!
                </div>
            </div>
        </div>
        <div class="wrap"></div>
        <div class="wrap"></div>
    </div>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>

        // 初始化
        function init() {
            wishbtn = document.getElementsByClassName('wish-btn')
            input = document.getElementsByClassName('love-inputbox')
            close = document.getElementsByClassName('close')
            writebox = document.getElementsByClassName('write-box')
            title = document.getElementsByClassName('write-title')
            content = document.getElementsByClassName('content')
            get = document.getElementsByClassName('get')
            textarea = document.getElementsByClassName('textarea')
            get = document.getElementsByClassName('get')
            paperWall = document.getElementsByClassName('paper-wall')
            paper = document.getElementsByClassName('paper')
            wrap = document.getElementsByClassName('wrap')
            lookPaper = document.getElementsByClassName('look-paper')[0]
            bigPaperBtn = document.getElementsByClassName('big-paper-btn')[0]
            bigPaperContent = document.getElementsByClassName('big-paper-content')[0]
            wallIndex = null;
            removeIndex = null;
            // 存储情绪的数组
            emotion = [[], [], [], []]
        }
        //创建便利贴
        function createPaper(str, index) {
            const tamplate = `<div class="paper">
                            <div class="tape-corner"></div>
                            <div style="width: 100%;">${str}</div>
                            <div class="tape-corner"></div>
                        </div>`
            $(tamplate).appendTo($(`.wall-${index}`));
            console.log($(`.wall${index}`));
            // var paperDiv = document.createElement('div')
            // var corner1 = document.createElement('div')
            // var corner2 = document.createElement('div')
            // var p = document.createElement('div')
            // paperDiv.classList.add("paper")
            // corner1.classList.add("tape-corner")
            // corner2.classList.add("tape-corner")
            // p.style.width = "100%"
            // p.innerText = str
            // paperWall[index].appendChild(paperDiv)
            // paperDiv.appendChild(corner1)
            // paperDiv.appendChild(p)
            // paperDiv.appendChild(corner2)
        }
        //获取子元素索引
        function getChildrenIndex(ele) {
            //IE is simplest and fastest
            if (ele.sourceIndex) {
                return ele.sourceIndex - ele.parentNode.sourceIndex - 1;
            }
            //other browsers
            var i = 0;
            while (ele = ele.previousElementSibling) {
                i++;
            }
            return i;
        }
        //初始化情绪墙
        function initEmotion() {

            for (let i = 0; i < emotion.length; i++) {

                if (localStorage.getItem(`emotion${i}`)) {
                    removeWallChild(i)
                    var a = JSON.parse(localStorage.getItem(`emotion${i}`))
                    emotion[i] = a
                    // console.log(emotion[i]);

                    // window.location.reload(".paper-wall");
                    for (let j = 0; j < a.length; j++) {
                        createPaper(a[j], i)
                    }
                }
            }
        }
        //关闭遮罩屏
        function closeWrap() {
            lookPaper.style.opacity = '0'
            wrap[0].style.opacity = '0'
            setTimeout(() => {
                wrap[0].style.display = 'none'
                lookPaper.style.display = 'none'
            }, 200)
        }
        //删除所有子节点
        function removeWallChild(index) {
            var el = document.getElementsByClassName(`wall-${index}`)[0];
            var childs = el.childNodes;
            for (let i = childs.length - 1; i >= 0; i--) {
                el.removeChild(childs[i]);
            }
        }
        //关闭输入框
        function closeInput(i) {
            wrap[1].style.opacity = '0'
            setTimeout(() => {
                wrap[1].style.display = 'none'
            }, 200)
            input[i].style.visibility = "hidden"
            input[i].style.height = "0"
            close[i].style.display = "none"
            writebox[i].style.height = "0"
            title[i].style.height = "0"
            content[i].style.height = "0"
            get[i].style.height = "0"
            get[i].style.visibility = "hidden"
            title[i].style.visibility = "hidden"
            content[i].style.visibility = "hidden"
            textarea[i].value = ''
            wrap[1].style.display = 'none'
        }

        init()
        initEmotion()
        for (let i = 0; i < input.length; i++) {
            wishbtn[i].onclick = function () {
                wrap[1].style.opacity = ".5"
                setTimeout(() => {
                    wrap[1].style.display = "block"
                }, 200)

                for (let j = 0; j < input.length; j++) {
                    input[j].style.visibility = "hidden"
                    input[j].style.height = "0"
                    close[j].style.display = "none"
                    writebox[j].style.height = "0"
                    title[j].style.height = "0"
                    content[j].style.height = "0"
                    get[j].style.height = "0"
                    get[j].style.visibility = "hidden"
                    title[j].style.visibility = "hidden"
                    content[j].style.visibility = "hidden"
                }
                input[i].style.visibility = "visible"
                input[i].style.height = "500px"
                close[i].style.display = "block"
                writebox[i].style.height = "400px"
                title[i].style.height = "40px"
                content[i].style.height = "80%"
                get[i].style.height = "40px"
                get[i].style.visibility = "visible"
                title[i].style.visibility = "visible"
                content[i].style.visibility = "visible"
                setTimeout(() => {
                    textarea[i].focus()
                }, 400);
                console.log(textarea);
            }

            close[i].onclick = function () {
                closeInput(i)
            }

            get[i].onclick = function () {
                var textareaVal = textarea[i].value.trim()
                if (textareaVal != '') {
                    createPaper(textareaVal, i)
                    emotion[i].push(textarea[i].value.trim())
                    localStorage.setItem(`emotion${i}`, JSON.stringify(emotion[i]))

                    //文本框重置
                    textarea[i].value = ''
                    textarea[i].focus()

                    closeInput(i)
                    setTimeout(() => {
                        location.reload()
                    }, 300)

                } else {
                    alert("分享快乐，宣泄烦恼，别憋着~")
                    textarea[i].focus()
                }
            }
        }
        for (let i = 0; i < paper.length; i++) {
            paper[i].onclick = function () {
                const paperGroupIndex = this;
                console.log(this.parentNode);
                //获取某一块情绪墙的的子节点索引
                removeIndex = getChildrenIndex(this)
                //获取模块墙索引
                wallIndex = Number(this.parentNode.classList.item(2).split('-')[1]);
                bigPaperContent.innerText = this.innerText
                setTimeout(() => {
                    wrap[0].style.opacity = '0.5'
                    lookPaper.style.opacity = '1'
                }, 200)

                wrap[0].style.display = "block"
                lookPaper.style.display = "block"
                flag = true
            }
        }
        wrap[0].onclick = function () {
            closeWrap()
        }
        bigPaperBtn.onclick = function () {
            emotion[wallIndex].splice(removeIndex, 1);
            console.log(emotion[wallIndex]);
            localStorage.setItem(`emotion${wallIndex}`, JSON.stringify(emotion[wallIndex]))
            removeWallChild(wallIndex)
            initEmotion()
            closeWrap()
            location.reload()
        }


    </script>
</body>

</html>